<template>
    <div class="tabber">
        <div v-for="(item,index) in tablist" :key="index" class="tab" @click="change(index)" :class="{active:cindex == index}">{{item}}</div>
    </div>
</template>

<script>
export default {
      data(){
          return {
              cindex:0,
              tablist:[
                  "首页",
                  "爆爆团",
                  "订单",
                  "我的"
              ]
          }
      },
      methods:{
          change(index){
              this.cindex = index
          }
      }
}
</script>

<style>
    *{
          margin: 0;
          padding: 0;
      }
    .tabber{
        width: 100%;
        height: 30px;
          position: fixed;
          bottom:0;
          display: flex;
          justify-content: space-around;
         /* margin: 0 20px;            */
         margin: 10px 0;
         border-top:1px solid #999;
    }
    .tabber .tab{
        padding: 10px;
    }
    .active{
        color: red;
    }
</style>